<template>
	<div class="table-comp-root">
		<ux-grid class="ux-table" ref="singleTable" :data="partsSpecListTable" :header-cell-style="{
			color: 'rgba(0, 0, 0, 0.85)',
			fontSize: '14px',
			textAlign: 'left',
			fontWeight: 'bold',
			padding: 0,
			height: '32px',
			background: 'rgb(244,245,246)'
		}" :cell-style="{
			color: 'rgba(96,98,102,1)',
			fontSize: '14px',
			textAlign: 'left',
			padding: 0,
			height: '32px',
		}" :checkbox-config="{
			showHeader: false,
		}" @current-change="handleTableCurrentChange" :height="tableHeight" highlight-current-row element-loading-spinner="el-icon-loading"
			element-loading-background="#f8f8f8" :element-loading-text="$t('message.bhView.loading')">
			<template slot="empty"> No data </template>
			<ux-table-column property="label" width="50">
				<template slot-scope="scope">
					<p style="text-align: left;">{{ scope.row.no }}</p>
				</template>
			</ux-table-column>
			<ux-table-column property="label" :title="partsTableCaptions[0]" align="left">
				<template slot-scope="scope">
					<p style="text-align: left;">{{ scope.row.partsName }}</p>
				</template>
			</ux-table-column>
			<ux-table-column property="label" :title="partsTableCaptions[1]" align="left">
				<template slot-scope="scope">
					<p style="text-align: left;">{{ scope.row.partsAttributeName }}</p>
				</template>
			</ux-table-column>
			<ux-table-column property="label" :title="partsTableCaptions[2]" align="left" width="0">
				<template slot-scope="scope">
					<p style="text-align: left;">{{ scope.row.partsClassName }}</p>
				</template>
			</ux-table-column>
			<ux-table-column property="label" :title="partsTableCaptions[3]" align="left">
				<template slot-scope="scope">
					<p style="text-align: left;">{{ scope.row.partsShapeName }}</p>
				</template>
			</ux-table-column>
		</ux-grid>	
	</div>
</template>

<script>
import $ from "jquery";
import { GetPartsSpecList } from "@/api/api";
export default {
	props: ["PltCode", "dmgCode", "partsTableCaptions"],
	data() {
		return {
			tableHeight: 400,
			partsSpecListTable: [],
			currentRow: 0,
			holdPartsSpecRow: 0,
		};
	},

	watch: {
		partsTableCaptions() {
			this.getTableHeight();
			this.GetPartsSpecList();
		},
		partsSpecListTable() {
			this.$emit("onChangedPartsSpecTableCount", this.partsSpecListTable.length);
		}
	},

	methods: {
		getTableHeight() {
			this.tableHeight = $(".table-comp-root").height();
		},
		handleTableCurrentChange(val, isPushPartsSpec) {
			if (!this.$store.state.isCurrentNext) {
				// 部位仕様編集中はテーブルを切り替えさせない(currentRowに戻す)
				this.$refs.singleTable.setCurrentRow(this.partsSpecListTable[this.currentRow]);
				this.holdPartsSpecRow = val ? val.no - 1 : 0;
				this.$emit("onPartsSpecSelect", val);
			} else {
				this.currentRow = val ? val.no - 1 : 0;
				this.holdPartsSpecRow = val ? val.no - 1 : 0;
				this.$emit("onPartsSpecSelect", val);
				if (!isPushPartsSpec && this.partsSpecListTable.length > 0  && this.partsSpecListTable[this.partsSpecListTable.length - 1].partsName === "") {
					this.partsSpecListTable.pop();
				}
			}
		},
		GetPartsSpecList() {
			let Dto = {
				dmgCode: this.dmgCode,
			}
			GetPartsSpecList(Dto).then((res) => {
				this.partsSpecListTable = [];
				if (res.data.code !== 0) {
					this.$emit("onPartsSpecSelect", null);
				}
				else {
					res.data.data.forEach(l => {
						let partsSpec = {
							no: this.partsSpecListTable.length + 1,
							partsName: l.partsName,
							partsAttributeName: l.partsAttributeName,
							partsClassName: l.partsClassName,
							partsShapeName: l.partsShapeName,
							partsCode: l.partsCode,
							dmgCode: l.dmgCode,
							machineCode: l.machineCode,
						};
						this.partsSpecListTable.push(partsSpec);

					});
					if (this.partsSpecListTable.length >= 1) {
						this.$refs.singleTable.setCurrentRow(this.partsSpecListTable[0]);
						this.currentRow = 0;
						this.handleTableCurrentChange(this.partsSpecListTable[0], false);
					}
				}
			});
		},
		async AfterSaveGetPartsSpecList(isConfirmClick) {
			let Dto = {
				dmgCode: this.dmgCode,
			}
			let res = await GetPartsSpecList(Dto);

			if (res.data.code !== 0) {
				this.$emit("onPartsSpecSelect", null);
			}
			else {
				this.partsSpecListTable = [];
				res.data.data.forEach(l => {
					let partsSpec = {
						no: this.partsSpecListTable.length + 1,
						partsName: l.partsName,
						partsAttributeName: l.partsAttributeName,
						partsClassName: l.partsClassName,
						partsShapeName: l.partsShapeName,
						partsCode: l.partsCode,
						dmgCode: l.dmgCode,
						machineCode: l.machineCode,
					};
					this.partsSpecListTable.push(partsSpec);
				});
				if (this.partsSpecListTable.length >= 1) {
					if (isConfirmClick) {
						this.$refs.singleTable.setCurrentRow(this.partsSpecListTable[0]);
						this.currentRow = 0;
						this.handleTableCurrentChange(this.partsSpecListTable[0], false);
					} else {
						this.$refs.singleTable.setCurrentRow(this.partsSpecListTable[this.holdPartsSpecRow]);
						this.currentRow = this.holdPartsSpecRow;
					}

				}
			}
		},
		AddPartsSpec() {
			let Dto = {
				dmgCode: this.dmgCode,
			}
			GetPartsSpecList(Dto).then((res) => {
				this.partsSpecListTable = [];
				if (res.data.code !== 0) {
					this.PushPartsSpec();
				}
				else {
					res.data.data.forEach(l => {
						let partsSpec = {
							no: this.partsSpecListTable.length + 1,
							partsName: l.partsName,
							partsAttributeName: l.partsAttributeName,
							partsClassName: l.partsClassName,
							partsShapeName: l.partsShapeName,
							partsCode: l.partsCode,
							dmgCode: l.dmgCode,
							machineCode: l.machineCode,
						};
						this.partsSpecListTable.push(partsSpec);
					});
					this.PushPartsSpec();
				}
			});
		},
		PushPartsSpec() {
			let partsSpec = {
				no: this.partsSpecListTable.length + 1,
				partsName: "",
				partsAttributeName: "",
				partsClassName: "",
				partsShapeName: "",
				partsCode: null,
				dmgCode: this.dmgCode,
				machineCode: null,
			};
			this.partsSpecListTable.push(partsSpec);
			this.$refs.singleTable.setCurrentRow(partsSpec);
			this.currentRow = partsSpec.no - 1;
			this.handleTableCurrentChange(partsSpec, true);
		},
		DeleteLastPartsSpecTable() {
			this.partsSpecListTable.pop();
			this.$refs.singleTable.setCurrentRow(this.partsSpecListTable[0]);
			this.currentRow = 0;
			this.handleTableCurrentChange(this.partsSpecListTable[0], false);
		},
		setHoldRow() {
			this.$refs.singleTable.setCurrentRow(this.partsSpecListTable[this.holdPartsSpecRow]);
			this.currentRow = this.holdPartsSpecRow;
			if (this.partsSpecListTable[this.partsSpecListTable.length - 1].partsName === "") {
				this.partsSpecListTable.pop();
			}
		},
	},

	created() {
		
	},

	mounted() {
		this.getTableHeight();
		this.GetPartsSpecList();
	},
};
</script>

<style lang="scss" scoped>
.table-comp-root {
	width: 100%;
	height: 100%;

	::v-deep .current-row>td {
		background-color: rgba(2, 150, 255, 0.07) !important;
	}
}
</style>